<template>
	<view>
		<view class="item-search">
			<view class="title">诗词搜索</view>
			<view class="poetry">
				<view class="search">
					<view class="search-image"><image src="../../static/tabbar/search.png"></image></view>
					<input selection-start="3" @input="poetryInput" type="text" placeholder-style="font-size:13px;" placeholder="请输入你要搜索的古诗词" />
				</view>
				<view class="search-button" @click="clickPoetry">搜索</view>
			</view>
		</view>
		
		<view class="item-search">
			<view class="title">诗人搜索</view>
			<view class="poetry">
				<view class="search">
					<view class="search-image"><image src="../../static/tabbar/search.png"></image></view>
					<input selection-start="3" type="text" @input="poetInput" placeholder-style="font-size:13px;" placeholder="请输入你要搜索的诗人" />
				</view>
				<view class="search-button" @click="clickPoet">搜索</view>
			</view>
		</view>
		
		<view class="item-search">
			<view class="title">成语搜索</view>
			<view class="poetry">
				<view class="search">
					<view class="search-image"><image src="../../static/tabbar/search.png"></image></view>
					<input selection-start="3" @input="chengyuInput" type="text" placeholder-style="font-size:13px;" placeholder="请输入你要搜索的成语" />
				</view>
				<view class="search-button" @click="clickChengyu">搜索</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import unils from "../../unils/utils.js"
	export default {
		data() {
			return {
				'searchPoetry':"",
				'searchPoet':"",
				'searchChengyu':"",
			}
		},
		methods: {
			//诗词
			poetryInput:function(e){
				this.searchPoetry =  e.detail.value;
			},
			clickPoetry:function(){
				if(unils.stringIsEmptyShowToast(this.searchPoetry,'请输入你要搜索的诗词！')){
					uni.navigateTo({
						url:"search_detail?type=1&search="+this.searchPoetry,
					})
				}
				
			},
			//诗人
			poetInput:function(e){
				this.searchPoet =  e.detail.value;
			},
			clickPoet:function(){
				if(unils.stringIsEmptyShowToast(this.searchPoetry,'请输入你要搜索的诗人！')){
					uni.navigateTo({
						url:"search_detail?type=2&search="+this.searchPoet,
					})
				}
				
			},
			//成语
			chengyuInput:function(e){
				this.searchChengyu =  e.detail.value;
			},
			clickChengyu:function(){
				if(unils.stringIsEmptyShowToast(this.searchPoetry,'请输入你要搜索的成语！')){
					uni.navigateTo({
						url:"search_detail?type=3&search="+this.searchChengyu,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.item-search{
	// display: flex;
	// flex-direction: row;
	margin: 0 auto;
	// background-color: #007AFF;
	width:90%;
	.title{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 40px;
		font-size: 16px;
		font-weight: bold;
		margin: 10px 0;
		color: $uni-text-color;
	}
	.poetry{
		background-color: $uni-bg-color;
		border-radius: 5px;
		margin: 10px;
		display: flex;
		
		.search{
			width:90%;
			border: 1px $uni-primary-color solid;
			height:40px;
			// margin: 0 5px;
			border-radius: 20px 0 0 20px;
			display: flex;
			align-items: center;
			
			input{
				margin-left: 10px;
				// background-color: #007AFF;
				width:85%;
			}
			.search-image{
				// background-color: #4CD964;
				width:15%;
				// padding-left: 15px;
				image{
					width:25px;
					height:25px;
					margin-left: 15px;
					margin-top: 5px;
				}
			}		
		}
		.search-button{
			display: flex;
			justify-content: center;
			background-color: $uni-primary-color;
			height:42px;
			line-height: 42px;
			font-size: 14px;
			color:$uni-bg-color;
			width:15%;
			// width:50px;
			border-radius: 0 20px 20px 0;
			// flex-shrink: 0;
		}
	}
}

</style>
